<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>
    <div class="nav">
      <mt-button v-for='(item,index) in menu' size="small" :key='index' v-if='index < 4' :class="{'active':currentSort==item.id}"
        @click='getSubmenu(item.id)'>{{item.name}}</mt-button>
    </div>

    <div class="submenu">
      <p class="select">选择具体问题</p>
      <span class="item" v-for="(item,index) in submenu" :key='index' :class="{'menuactive':submenuActive==item.id}"
        @click="Submenu(item.id)">{{item.name}}</span>
    </div>

    <div class="text">
      <textarea name="" v-model="backContent" id="" cols="30" rows="10" placeholder="请详细描述您所遇到的问题…"></textarea>

      <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
        :on-change="changeFile" :on-success="uploadSuccess" :auto-upload="false">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>


    </div>
    <mt-button size='large' @click='addBack()'>提交</mt-button>

  </div>
</template>

<script>
  import {
    get_problem_menu,
    get_problem_submenu,
    add_problem,
    image
  } from '@/api/'
  export default {
    data() {
      return {
        currentSort: '0', //一级目录id
        dialogImageUrl: '',
        dialogVisible: false,
        menu: '', //反馈一级栏目
        submenu: '', //反馈二级栏目
        submenuActive: '', //二级栏目id
        backContent: '', //反馈内容
        imgBase64Array: [],
        imageUrl: '',
        imgs: '', //图片地址保存
      }
    },
    methods: {

      changeFile(file, fileList) {
        var This = this;
        //this.imageUrl = URL.createObjectURL(file.raw);
        var reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = function(e) {
          //this.result // 这个就是base64编码了
          This.imageUrl = this.result;
          image({
            img: This.imageUrl
          }).then(res => {
            // console.log(res)
            if (res.status == 1) {
              This.imgs += res.data+',';
              // console.log(This.imgs)
              // console.log(this.imgs)
            }
          })
        };

      },
      addBack(){//提交上传信息
        add_problem({tel:this.usertel,menu:this.currentSort,submenu:this.submenuActive,content:this.backContent,imgs:this.imgs}).then(res=>{
          if(res.status == 1){
            this.$messagebox.alert('反馈成功！').then(action => {
              if(action == 'confirm'){
                this.$router.push('/feedback');
              }
            });
          }else{
            this.$messagebox.alert('反馈失败！')
          }
        })

      },
      getMenu() { //获取默认一级栏目
        get_problem_menu().then(res => {
          console.log(res)
          this.menu = res.data;
          this.currentSort = res.data[0].id;
          get_problem_submenu({
            id: res.data[0].id
          }).then(res => {
            console.log(res)
            this.submenu = res.data;
            this.submenuActive = res.data[0].id;
          })
        })

      },
      getSubmenu(id) { //获取二级栏目
        this.currentSort = id;
        get_problem_submenu({
          id: id
        }).then(res => {
          console.log(res)
          this.submenu = res.data;
          this.submenuActive = res.data[0].id;
        })
      },
      Submenu(id) { //二级栏目标签切换
        this.submenuActive = id;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 上传图片成功
      uploadSuccess(res, file, fileList) {
        this.uploadComplete = true;
        //this.fileChange(fileList);
        console.log(res)
      },


    },
    mounted() {
      this.getMenu();
    }
  }
</script>

<style scoped>
  .nav {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
  }

  .nav .mint-button {
    margin: 4px;
  }

  .item {
    padding: 15px;
    font-size: 12px;
    color: #666666;
  }

  .label-group {
    margin-top: 10px;
  }

  .label-group span {
    color: #999;
    font-size: 12px;
    padding: 6px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .text>textarea {
    width: 90%;
    margin: 0.75rem 0;
    border: none;
    outline: none;
    padding-left: 1.125rem;
    height: 6.5rem;
  }

  .active {
    color: #fff;
    background-color: #2f3953;
  }

  .submenu {
    padding-left: 1em;
  }

  .select {
    color: #666;
    font-size: 12px;
    line-height: 30px;
  }

  .submenu .item {
    font-size: 12px;
    color: #999;
    display: inline-block;
    padding: 4px 8px;
    border: 1px #777 solid;
    border-radius: 4px;
    margin-right: 6px;
  }

  .submenu .menuactive {
    color: #ff9c4c;
    border: 1px solid #ff9c4c;
  }

  .mint-button--large {
    margin-top: 6em;
    background-color: #151244;
    color: #fff;
  }
</style>
